<template>
  <div class="dealer flex">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">经销商中心</div>
    <div class="dealer-main main">
      <div class="dealer-login" v-show="show">
        <h4>登录</h4>
        <x-input v-model="form.phone" placeholder="手机号" type='number'></x-input>
        <x-input v-model="form.code" placeholder="验证码" class="weui-vcode" :show-clear="false">
          <x-button slot="right" mini :text="text" :disabled="disabled" @click.native="getCode(2)"></x-button>
        </x-input>
        <p class="dealer-tips">
          未验证？去
          <a href="javascript:;" @click="show = !show">验证</a>
        </p>
        <x-button
          mini
          style="width: 100%;background: #2e2e2e;color: #fff;padding: 0.18rem;font-size: 0.28rem;"
          @click.native="login"
        >确认登录</x-button>
      </div>
      <div class="dealer-verification" v-show="!show">
        <h4>验证</h4>
        <x-input v-model="checkForm.city" placeholder="城市"></x-input>
        <x-input v-model="checkForm.name" placeholder="姓名"></x-input>
        <x-input v-model="checkForm.phone" placeholder="手机号" type='number'></x-input>
        <x-input v-model="checkForm.code" placeholder="验证码" class="weui-vcode" :show-clear="false">
          <x-button slot="right" mini :text="text" :disabled="disabled" @click.native="getCode(1)"></x-button>
        </x-input>
        <p class="dealer-tips">
          已验证？去
          <a href="javascript:;" @click="show = !show">登录</a>
        </p>
        <x-button
          mini
          style="width: 100%;background: #2e2e2e;color: #fff;padding: 0.18rem;font-size: 0.28rem;"
          @click.native="verification"
        >确认验证</x-button>
      </div>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
import { XInput, XButton } from "vux";
import { login, register, getVerifyCode } from "@/api/index";
import { mapGetters } from "vuex";
export default {
  components: {
    XInput,
    XButton
  },
  data() {
    return {
      show: true,
      disabled: false,
      text: "获取验证码",
      form: {
        phone: "",
        code: ""
      },
      checkForm: {
        city: "",
        name: "",
        phone: "",
        code: ""
      }
    };
  },
  computed: {
    ...mapGetters(["type"])
  },
  methods: {
    getType(type) {
      this.$store.dispatch("setType/getType", type);
    },
    login() {
      const obj = {
        mobile: this.form.phone,
        verify_code: this.form.code
      };
      this.$store.dispatch("user/login", obj).then(res => {
        if (res.code == 200) {
          sessionStorage.setItem("token", res.data.token);
          sessionStorage.setItem("user_info", res.data.user_info);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("user_info", res.data.user_info);
          this.$vux.toast.text(res.msg, "top");
          this.$router.push({
            path: "/login-success",
            query: {
              type: this.type
            }
          });
        }
      })
    },
    verification() {
      const obj = {
        city: this.checkForm.city,
        true_name: this.checkForm.name,
        mobile: this.checkForm.phone,
        verify_code: this.checkForm.code
      };
      register(obj).then(res => {
        if (res.code == 200) {
          this.show == false;
        }
      });
    },
    getCode(type) {
      this.disabled = true;
      this.text = `60s`;
      let s = 60;
      let timer = setInterval(() => {
        s--;
        this.text = `${s}s`;
        if (s == 0) {
          clearInterval(timer);
          this.disabled = false;
          this.text = "获取验证码";
        }
      }, 1000);
      getVerifyCode({
        mobile: this.form.phone,
        type: type
      }).then(res => {
        this.$vux.toast.text(res.msg, "top");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.dealer-main {
  .dealer-login,
  .dealer-verification {
    font-size: 0.32rem;
    text-align: center;
    margin: 0.36rem 0.21rem 0;

    h4 {
      margin-bottom: 0.54rem;
    }

    .dealer-tips {
      margin: 0.5rem 0 0.36rem;
      color: #979797;

      a {
        text-decoration: underline;
        color: #000;
      }
    }

    .weui-vcode:after {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #d9d9d9;
      color: #d9d9d9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 15px;
    }
  }
}
</style>
